
@media screen and (min-width: 1501px), screen and (min-height: 801px) {
   
    #allinventorywindow{
        display: none;
        position: absolute;
        width: 60%;
        height: 80%;
        left: 20%;
		top: 10%;
		margin:0 !important;
        color: white;
        text-align: center;
        pointer-events: all;
    }

    #inventoryoffset {
    	position: absolute;
    	left:20%;
    	top:10%;
		pointer-events: all;
    }
    
	#characterItemBackpack {
		position:absolute;
		top:2%;
		left:20%;
	}
	
    #inventory0, #inventory1, #inventory2, #inventory3, #inventory4, #inventory5, #inventory6, #inventory7, #inventory8, #inventory9, #inventory10, #inventory11, #inventory12, #inventory13, #inventory14, #inventory15, #inventory16, #inventory17, #inventory18, #inventory19, #inventory20, #inventory21, #inventory22, #inventory23, #inventory24, #inventory25, #inventory26, #inventory27, #inventory28, #inventory29 {
        position: absolute;
        left:3px;
        top:3px;
        width: 48px;
        height: 48px;
        background-color: rgba(0, 0, 0, 0);
		cursor: pointer;
		pointer-events: all;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		line-height:48px;
		color: #fff;
		font-family: 'GraphicPixel';
		font-size:18px;
		text-align:center;
    }
    #inventorybackground0,#inventorybackground1,#inventorybackground2,#inventorybackground3,#inventorybackground4,#inventorybackground5,#inventorybackground6, #inventorybackground7, #inventorybackground8, #inventorybackground9, #inventorybackground10, #inventorybackground11, #inventorybackground12, #inventorybackground13, #inventorybackground14, #inventorybackground15, #inventorybackground16, #inventorybackground17, #inventorybackground18, #inventorybackground19, #inventorybackground20, #inventorybackground21, #inventorybackground22, #inventorybackground23, #inventorybackground24, #inventorybackground25, #inventorybackground26, #inventorybackground27, #inventorybackground28, #inventorybackground29 {
        position: absolute;
        width: 55px;
        height: 56px;
        background: url('../img/3/itembackground.png' ) no-repeat;
        pointer-events: all;
    }
    #inventorybackground0, #inventorybackground1, #inventorybackground2, #inventorybackground3, #inventorybackground4, #inventorybackground5{ top: 0px; }
    #inventorybackground6, #inventorybackground7, #inventorybackground8, #inventorybackground9, #inventorybackground10, #inventorybackground11{ top: 60px; }
    #inventorybackground12, #inventorybackground13, #inventorybackground14, #inventorybackground15, #inventorybackground16, #inventorybackground17{ top: 120px; }
    #inventorybackground18, #inventorybackground19, #inventorybackground20, #inventorybackground21, #inventorybackground22, #inventorybackground23{ top: 180px; }
    #inventorybackground24, #inventorybackground25, #inventorybackground26, #inventorybackground27, #inventorybackground28, #inventorybackground29{ top: 240px; }
    #inventorybackground0, #inventorybackground6, #inventorybackground12, #inventorybackground18, #inventorybackground24{ left: 0px; }
    #inventorybackground1, #inventorybackground7, #inventorybackground13, #inventorybackground19, #inventorybackground25{ left: 60px; }
    #inventorybackground2, #inventorybackground8, #inventorybackground14, #inventorybackground20, #inventorybackground26{ left: 120px; }
    #inventorybackground3, #inventorybackground9, #inventorybackground15, #inventorybackground21, #inventorybackground27{ left: 180px; }
    #inventorybackground4, #inventorybackground10, #inventorybackground16, #inventorybackground22, #inventorybackground28{ left: 240px; }
    #inventorybackground5, #inventorybackground11, #inventorybackground17, #inventorybackground23, #inventorybackground29{ left: 300px; }

    #inventory0Cooltime,  #inventory1Cooltime,  #inventory2Cooltime,  #inventory3Cooltime, #inventory4Cooltime,  #inventory5Cooltime {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 48px;
        height: 48px;
        background-color: rgba(255, 0, 0, 0.5);
        text-align: center;
        font-size: 21px;
        color: white;
        cursor: default;
        display: none;
    }
    
    #inventoryCloseButton {
	    position: absolute;
	    right: 2%;
	    top: 2%;
	    width: 32px;
	    height: 32px;
	    cursor: pointer;
	    z-index:15;
		background: url('../img/2/close-button.png' ) no-repeat;
	    pointer-events: all;
    }

	/* Character - Equipment */
	#characterEquipment 
	{
		position:absolute;
		left:2%;
		top:2%;
	}
    #characterItemWeapon, #characterItemArmor
	{
		position:relative;
		left:4px;
		top:6px;
        width: 48px;
        height: 45px;
        background-position: 0px 0px;
		font-family: 'GraphicPixel';
		text-align:center;
    }
    
	#characterItemArmorBox
	{
    	position:absolute;
        left: 0;
        top: 0;	
	}
	#characterItemWeaponBox
	{
    	position:absolute;
        left: 0;
        top: 90px;
	}
	#characterItemGoldBox
	{
    	position:absolute;
        left: 0;
        top: 180px;
	}

	#characterItemArmorBox span,
	#characterItemWeaponBox span,
	#characterItemGoldBox span
	{
		text-align:center;
	}
	
    #characterItemWeaponBackground
    {
		margin-top:3px;
        width: 55px;
        height: 56px;        
    	background-image: url('../img/3/itembackground.png');	    
    }
    
    #characterItemArmorBackground
    {
		margin-top:3px;
        width: 55px;
        height: 56px;        
    	background-image: url('../img/3/itembackground.png');    
    }

    #inventoryGoldBackground {
		position:absolute;
    	margin-top:3px;
        width: 55px;
        height: 55px;        
        background: url('../img/3/itembackground.png') no-repeat;     	    
    }
    #inventoryGoldBody {
        position: absolute;
        left:3px;
        top:3px;
    	width: 48px;
        height: 48px;
        background: url('../img/3/item-gold.png') no-repeat;    	    
    }
    #inventoryGoldBackground .inventoryGold {
    	position:absolute;
        left: 0;
        top: 30px;
        width: 55px;
        height: 18px;
		font-size:18px;
        color: #fff;
        text-align: center;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		font-family: 'GraphicPixel';		
    }	
}

@media screen and (max-width: 1500px), screen and (max-height: 870px) {
   
    #allinventorywindow{
        display: none;
        position: absolute;
        width: 60%;
        height: 80%;
        left: 20%;
		top: 10%;
		margin:0 !important;
		padding:2%;
        color: white;
        text-align: center;
        pointer-events: all;
    }

    #inventoryoffset {
    	position: absolute;
    	left:20%;
    	top:10%;
		pointer-events: all;
    }
    
	#characterItemBackpack {
		position:absolute;
		top:2%;
		left:20%;
	}
	
    #inventory0, #inventory1, #inventory2, #inventory3, #inventory4, #inventory5, #inventory6, #inventory7, #inventory8, #inventory9, #inventory10, #inventory11, #inventory12, #inventory13, #inventory14, #inventory15, #inventory16, #inventory17, #inventory18, #inventory19, #inventory20, #inventory21, #inventory22, #inventory23, #inventory24, #inventory25, #inventory26, #inventory27, #inventory28, #inventory29 {
        position: absolute;
        left:3px;
        top:3px;
        width: 48px;
        height: 48px;
        background-color: rgba(0, 0, 0, 0);
		cursor: pointer;
		pointer-events: all;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		line-height:48px;
		color: #fff;
		font-family: 'GraphicPixel';
		font-size:18px;
		text-align:center;
    }
    #inventorybackground0,#inventorybackground1,#inventorybackground2,#inventorybackground3,#inventorybackground4,#inventorybackground5,#inventorybackground6, #inventorybackground7, #inventorybackground8, #inventorybackground9, #inventorybackground10, #inventorybackground11, #inventorybackground12, #inventorybackground13, #inventorybackground14, #inventorybackground15, #inventorybackground16, #inventorybackground17, #inventorybackground18, #inventorybackground19, #inventorybackground20, #inventorybackground21, #inventorybackground22, #inventorybackground23, #inventorybackground24, #inventorybackground25, #inventorybackground26, #inventorybackground27, #inventorybackground28, #inventorybackground29 {
        position: absolute;
        width: 55px;
        height: 56px;
        background: url('../img/3/itembackground.png' ) no-repeat;
        pointer-events: all;
    }
    #inventorybackground0, #inventorybackground1, #inventorybackground2, #inventorybackground3, #inventorybackground4, #inventorybackground5{ top: 0px; }
    #inventorybackground6, #inventorybackground7, #inventorybackground8, #inventorybackground9, #inventorybackground10, #inventorybackground11{ top: 60px; }
    #inventorybackground12, #inventorybackground13, #inventorybackground14, #inventorybackground15, #inventorybackground16, #inventorybackground17{ top: 120px; }
    #inventorybackground18, #inventorybackground19, #inventorybackground20, #inventorybackground21, #inventorybackground22, #inventorybackground23{ top: 180px; }
    #inventorybackground24, #inventorybackground25, #inventorybackground26, #inventorybackground27, #inventorybackground28, #inventorybackground29{ top: 240px; }
    #inventorybackground0, #inventorybackground6, #inventorybackground12, #inventorybackground18, #inventorybackground24{ left: 0px; }
    #inventorybackground1, #inventorybackground7, #inventorybackground13, #inventorybackground19, #inventorybackground25{ left: 60px; }
    #inventorybackground2, #inventorybackground8, #inventorybackground14, #inventorybackground20, #inventorybackground26{ left: 120px; }
    #inventorybackground3, #inventorybackground9, #inventorybackground15, #inventorybackground21, #inventorybackground27{ left: 180px; }
    #inventorybackground4, #inventorybackground10, #inventorybackground16, #inventorybackground22, #inventorybackground28{ left: 240px; }
    #inventorybackground5, #inventorybackground11, #inventorybackground17, #inventorybackground23, #inventorybackground29{ left: 300px; }

    #inventory0Cooltime,  #inventory1Cooltime,  #inventory2Cooltime,  #inventory3Cooltime, #inventory4Cooltime,  #inventory5Cooltime {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 48px;
        height: 48px;
        background-color: rgba(255, 0, 0, 0.5);
        text-align: center;
        font-size: 21px;
        color: white;
        cursor: default;
        display: none;
    }

	/* Character - Equipment */
	#characterEquipment 
	{
		position:absolute;
		left:2%;
		top:2%;
	}
    #characterItemWeapon, #characterItemArmor
	{
		position:relative;
		left:4px;
		top:6px;
        width: 48px;
        height: 45px;
        background-position: 0px 0px;
		font-family: 'GraphicPixel';
		text-align:center;
    }
    
	#characterItemArmorBox
	{
    	position:absolute;
        left: 0;
        top: 0;	
	}
	#characterItemWeaponBox
	{
    	position:absolute;
        left: 0;
        top: 90px;
	}
	#characterItemGoldBox
	{
    	position:absolute;
        left: 0;
        top: 180px;
	}

	#characterItemArmorBox span,
	#characterItemWeaponBox span,
	#characterItemGoldBox span
	{
		text-align:center;
	}
	
    #characterItemWeaponBackground
    {
		margin-top:3px;
        width: 55px;
        height: 56px;        
    	background-image: url('../img/3/itembackground.png');	    
    }
    
    #characterItemArmorBackground
    {
		margin-top:3px;
        width: 55px;
        height: 56px;        
    	background-image: url('../img/3/itembackground.png');    
    }

    #inventoryGoldBackground {
		position:absolute;
    	margin-top:3px;
        width: 55px;
        height: 55px;        
        background: url('../img/3/itembackground.png') no-repeat;     	    
    }
    #inventoryGoldBody {
        position: absolute;
        left:3px;
        top:3px;
    	width: 48px;
        height: 48px;
        background: url('../img/3/item-gold.png') no-repeat;    	    
    }
    #inventoryGoldBackground .inventoryGold {
    	position:absolute;
        left: 0;
        top: 30px;
        width: 55px;
        height: 18px;
		font-size:18px;
        color: #fff;
        text-align: center;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		font-family: 'GraphicPixel';		
    }
}

@media screen and (max-width: 1000px) {
    #allinventorywindow{
        display: none;
        position: absolute;
        width: 60%;
        height: 80%;
        left: 20%;
		top: 10%;
		margin:0 !important;
		padding:2%;
        color: white;
        text-align: center;
        pointer-events: all;
    }

    #inventoryoffset {
    	position: absolute;
    	left:20%;
    	top:8%;
		pointer-events: all;
    }
    
	#characterItemBackpack {
		position:absolute;
		top:5%;
		left:20%;
	}
	
    #inventory0, #inventory1, #inventory2, #inventory3, #inventory4, #inventory5, #inventory6, #inventory7, #inventory8, #inventory9, #inventory10, #inventory11, #inventory12, #inventory13, #inventory14, #inventory15, #inventory16, #inventory17, #inventory18, #inventory19, #inventory20, #inventory21, #inventory22, #inventory23, #inventory24, #inventory25, #inventory26, #inventory27, #inventory28, #inventory29 {
        position: absolute;
        left:0;
        top:0;
        width: 16px;
        height: 16px;
        background-color: rgba(0, 0, 0, 0);
		cursor: pointer;
		pointer-events: all;
		line-height:14px;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		color: #fff;
		font-family: 'GraphicPixel';
		font-size:8px;
		text-align:center;
    }
    #inventorybackground0,#inventorybackground1,#inventorybackground2,#inventorybackground3,#inventorybackground4,#inventorybackground5,#inventorybackground6, #inventorybackground7, #inventorybackground8, #inventorybackground9, #inventorybackground10, #inventorybackground11, #inventorybackground12, #inventorybackground13, #inventorybackground14, #inventorybackground15, #inventorybackground16, #inventorybackground17, #inventorybackground18, #inventorybackground19, #inventorybackground20, #inventorybackground21, #inventorybackground22, #inventorybackground23, #inventorybackground24, #inventorybackground25, #inventorybackground26, #inventorybackground27, #inventorybackground28, #inventorybackground29 {
        position: absolute;
        width: 20px;
        height: 20px;
        background: url('../img/1/itembackground.png' ) no-repeat;
        pointer-events: all;
    }
    #inventorybackground0, #inventorybackground1, #inventorybackground2, #inventorybackground3, #inventorybackground4, #inventorybackground5{ top: 0px; }
    #inventorybackground6, #inventorybackground7, #inventorybackground8, #inventorybackground9, #inventorybackground10, #inventorybackground11{ top: 24px; }
    #inventorybackground12, #inventorybackground13, #inventorybackground14, #inventorybackground15, #inventorybackground16, #inventorybackground17{ top: 48px; }
    #inventorybackground18, #inventorybackground19, #inventorybackground20, #inventorybackground21, #inventorybackground22, #inventorybackground23{ top: 72px; }
    #inventorybackground24, #inventorybackground25, #inventorybackground26, #inventorybackground27, #inventorybackground28, #inventorybackground29{ top: 96px; }
    #inventorybackground0, #inventorybackground6, #inventorybackground12, #inventorybackground18, #inventorybackground24{ left: 0px; }
    #inventorybackground1, #inventorybackground7, #inventorybackground13, #inventorybackground19, #inventorybackground25{ left: 24px; }
    #inventorybackground2, #inventorybackground8, #inventorybackground14, #inventorybackground20, #inventorybackground26{ left: 48px; }
    #inventorybackground3, #inventorybackground9, #inventorybackground15, #inventorybackground21, #inventorybackground27{ left: 72px; }
    #inventorybackground4, #inventorybackground10, #inventorybackground16, #inventorybackground22, #inventorybackground28{ left: 96px; }
    #inventorybackground5, #inventorybackground11, #inventorybackground17, #inventorybackground23, #inventorybackground29{ left: 120px; }

    #inventory0Cooltime,  #inventory1Cooltime,  #inventory2Cooltime,  #inventory3Cooltime, #inventory4Cooltime,  #inventory5Cooltime {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 0, 0, 0.5);
        text-align: center;
        font-size: 10px;
        color: white;
        cursor: default;
        display: none;
    }

	/* Character - Equipment */
	#characterEquipment 
	{
		position:absolute;
		left:2%;
		top:0;
	}
    #characterItemWeapon, #characterItemArmor
	{
		position:relative;
		left:1px;
		top:1px;
        width: 16px;
        height: 16px;
        background-position: 0px 0px;
		font-family: 'GraphicPixel';
		text-align:center;
    }
    
	#characterItemArmorBox
	{
    	position:absolute;
        left:2%;
        top: 0;	
	}
	#characterItemWeaponBox
	{
    	position:absolute;
        left:2%;
        top: 35px;
	}
	#characterItemGoldBox
	{
    	position:absolute;
        left:2%;
        top: 70px;
	}

	#characterItemArmorBox span,
	#characterItemWeaponBox span,
	#characterItemGoldBox span
	{
		text-align:center;
	}
	
    #characterItemWeaponBackground
    {
		position:relative;
		left:0;
		top:0;

		margin-top:1px;
        width: 20px;
        height: 20px;        
    	background-image: url('../img/1/itembackground.png');	    
    }
    
    #characterItemArmorBackground
    {
		position:relative;
		left:0;
		top:0;

        width: 20px;
        height: 20px;        
    	background-image: url('../img/1/itembackground.png');    
    }

    #inventoryGoldBackground {
		position:relative;
		left:0;
		top:0;

        width: 20px;
        height: 20px;        
        background: url('../img/1/itembackground.png') no-repeat;     	    
    }
    #inventoryGoldBody {
        position: absolute;
        left:2px;
        top:2px;
    	width: 16px;
        height: 16px;
        background: url('../img/1/item-gold.png') no-repeat;    	    
    }
    #inventoryGoldBackground .inventoryGold {
    	position:relative;
        left: 0;
        top: 0;
        width: 28px;
        height: 9px;
		font-size:9px;
        color: #fff;
        text-align: center;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		font-family: 'GraphicPixel';		
    } 
}


